//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin list-view() {
    /* ==========================================================================
       List view

       Default Mendix list view widget. The list view shows a list of objects arranged vertically. Each object is shown using a template
    ========================================================================== */
    .mx-listview {
        // Remove widget padding
        padding: 0;
        /* Clear search button (overrides load more button stying) */
        & > ul {
            margin: 0 0 $spacing-medium;

            .mx-listview-empty {
                border-style: none;
                background-color: transparent;
            }

            & > li {
                @include transition();
                background-color: #fff;
                padding: $spacing-medium;
                border-top: 1px solid $grid-border-color;

                &:last-child {
                    border-bottom: 1px solid $grid-border-color;
                }

                &:focus,
                &:active {
                    outline: 0;
                }
            }
        }

        .selected {
            background: $color-primary-light;
        }

        .mx-layoutgrid {
            padding: 0 !important;
        }
    }

    // Search bar
    .mx-listview-searchbar {
        margin-bottom: $spacing-medium;

        .btn {
            width: auto;
        }
    }

    /* Load more button */
    .btn.mx-listview-loadMore {
        width: 100%;
        margin: 0 0 $spacing-medium;
    }

    //== Phone specific
    //-------------------------------------------------------------------------------------------------------------------//
    .profile-phone .mx-listview {
        .mx-listview-searchbar {
            margin-bottom: 3px;
            background: #ffffff;
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);

            input {
                padding: 14px 15px;
                color: #555555;
                border-style: none;
                border-radius: 0;
                box-shadow: none;
            }

            .btn {
                padding: 14px 15px;
                color: inherit;
                border-style: none;
            }
        }

        & > ul > li {
            &:first-child {
                border-top: none;
            }
        }
    }
}
